
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ux.Fusion Charts with uxChartPack 2.1</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../debug.js"></script>
    <script type="text/javascript" src="../media2/uxvismode.js"></script>
    <script type="text/javascript" src="../media2/uxmedia.js"></script>
    <script type="text/javascript" src="../media2/uxflash.js"></script>
    <script type="text/javascript" src="uxchart.js"></script>
    <script type="text/javascript" src="uxfusion.js"></script>


    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript">

//Highly recommended for use with complex/Flash Ext.Components

Ext.removeNode =  Ext.isIE ? function(n){
            var d = document.createElement('div'); //the original closure held a reference till reload as well.
            if(n && n.tagName != 'BODY'){
                    var d = document.createElement('div');
                    d.appendChild(n);
                    //d.innerHTML = '';  //either works equally well
                    d.removeChild(n);
                    delete Ext.Element.cache[n.id];  //clear out any Ext reference from the Elcache
                    d = null;  //just dump the scratch DIV reference here.
            }

        } :
        function(n){
            if(n && n.parentNode && n.tagName != 'BODY'){
                n.parentNode.removeChild(n);
                delete Ext.Element.cache[n.id];
            }
};


Ext.lib.Ajax.forceActiveX = true;
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';


Ext.onReady(function(){

     Ext.QuickTips.init();
     Ext.QuickTips.getQuickTip().interceptTitles = true;

     Ext.QuickTips.enable();

  var getTools = function(){
      return [{id:'refresh', handler:function(e,t,p){ p.refreshMedia();},qtip: {text:'Refresh the Chart'}  },
             {id:'print', handler:function(e,t,p){ p.chart.print();},qtip: {text:'Print the Chart'}  },
             //save as image support
             {id:'save', handler:function(e,t,p){ p.chart.saveAsImage(); },
                  qtip: {title:'Save Chart as Image',text:'This example requires a PHP-Server.'}
             }
        ];
    };


  view = new Ext.ux.Chart.Fusion.Window({

            height      : 500,
            width       : 350,
            x           : 570,
            id          :'winFusion',
            title       : 'ux.Fusion.Window:',
            collapsible : true,
            maximizable : true,
            autoScroll : false,

            tools       : getTools(),
            constrainHeader : true,

            chartCfg   :{
                id   : 'chart2',
                renderOnResize : false,   //Fusion 3.1 supports 100% width/height resizing, so disable,
                width : '100%',
                height : '100%'
            }
            ,mediaMask : {msg:'Loading Chart Object'}
            ,loadMask  : {msg:'Gathering Chart Data'}
            ,autoMask  : true
            ,listeners :{
                       chartload : function(win,obj){

                          win.setTitle(win.title.split(":")[0]+': Chart Object Loaded.');
                          }
                      ,chartrender : function(win,obj){

                          win.setTitle(win.title.split(":")[0]+': Rendered.');
                          },

                       dataloaded : function(win, obj){

                           win.setTitle(win.title.split(":")[0]+': Data Loaded.');
                       }

            }

            ,chartURL   : 'Fusion/Column3D.swf'
            , dataURL  :'data-files/Fusion/column3D.xml' //let the chartObj load it
            /* ,autoLoad   :{    //let Ext autoLoad do the same.
                url:'data-files/Fusion/Column3D.xml',
                disableCaching : false ,
                callback : function(comp, success, response, options){
                    console.info(arguments);

                }
            }*/

  });

   panel  = new Ext.ux.Chart.Fusion.Panel({
       title       : 'ux.Fusion.Panel:',
       collapsible : true,
       id       : 'panelFusion',
       renderTo    : Ext.getBody(),
       floating:false,
       chartCfg   :{ id   : 'chart1'

                     ,params : {
                        flashVars: {
                           debugMode : 0
                           }
                      }
                  },


       chartURL : 'Fusion/Pie3D.swf',
       dataURL  : 'data-files/Fusion/Column3D.xml',
       mediaMask  : {msg:'Loading Chart Object'},
       autoMask  : true,
       width     : 500,
       height    : 400,
       listeners :{

           chartload : function(p,obj){
               p.setTitle(p.title.split(":")[0]+': Chart Object Loaded.');
               }
           ,chartrender : function(p,obj){
               p.setTitle(p.title.split(":")[0]+': Rendered.');
               }
       },
       tools     : getTools()

  });
  panel.show();


  view.show();


  /* Warning -- Fusion somehow raises window beforeunload (all browsers)
    when it completes an image upload.
    Thus, cleanup is disabled for this demonstration
    */

   /* Ext.EventManager.on(window,   "beforeunload",  function(){

       Ext.destroy( view, panel, Ext.QuickTips.getQuickTip());
       } ,window ,{single:true});
    */
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="aboutFusion">
For more on FusionCharts visit <a href="http://www.fusioncharts.com/" target="_blank">fusioncharts.com</a>
</div>
</body>
</html>
